<template>
  <div class="box1">
    <div class="header">{{msg}}</div>
    <form action>
      标题:
      <input type="text" v-model="title" />
      <br />内容:
      <input type="text" v-model="msg1" />
    </form>

    <div class="anniu">
      <button @click='queren(title,msg1)'>确定</button>
      <button @click='qiaoxiao'>取消</button>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        title:'',
        msg1:'',
    }
  },
    props:['msg'],
    methods:{
      qiaoxiao(){
        this.title = '';
        this.msg1 = '';
        this.$emit('changeIsShow')

      },
      queren(title,msg1){
        this.$emit('addList',{title,msg1})
        this.title='';
        this.msg1='';
        
      }
    }



}
</script>

<style scoped>
.box1 {
  width: 400px;
  height: 300px;
  background: #eee;
  position: fixed;
  left: 50%;
  margin-left: -200px;
  top: 100px;

  /* display: none; */
    /* position: absolute;
    left: 50%;
    margin-left: 50%;
    top: 0;   */
} 
.header {
  width: 400px;
  height: 40px;
  background: blue;
  font-size: 30px;
  color: #fff;
}
.anniu {
  width: 100px;
  height: 20px;
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -50px;
  /* padding: 10px; */
}
.anniu button{
    display: inline-block;
    margin:  2px;
}

</style>